<template>
  <div>
    <!-- 顶部头像区域 -->
    <div class="avatar-box">
      <nuxt-link :to="'/user/'+userId"><img :src="avatar" alt=""></nuxt-link>
      <div>
        <b class="fs25">{{ username }}</b>
      </div>
    </div>
    <!-- 用户各项统计 -->
    <div class="total">
      <div class="a">
        <!-- follow 为 true 或隐私用户ID等于当前登录用户ID 可查看关注列表 -->
        <el-button v-if="privacy.follow || privacy.userId === authId" :class="{current:(routeName === followee)}" plain
                   size="mini" @click="toFollowee">关注 {{ count.followCount }}
        </el-button>
        <!-- follow 为 false 或隐私用户ID不等于当前登录用户ID 不可查看关注列表 -->
        <el-tooltip class="item" effect="light" content="由于该用户隐私设置，关注列表不可见" placement="top">
          <el-button v-if="!privacy.follow && privacy.userId !== authId" plain size="mini">关注 {{ count.followCount }}
          </el-button>
        </el-tooltip>
        <!-- 可查看 -->
        <el-button v-if="privacy.follower || privacy.userId === authId" :class="{current:(routeName === follower)}"
                   plain size="mini"
                   @click="toFollower">粉丝 {{ count.followerCount }}
        </el-button>
        <!-- 不可查看 -->
        <el-tooltip class="item" effect="light" content="由于该用户隐私设置，粉丝列表不可见" placement="top">
          <el-button v-if="!privacy.follower && privacy.userId !== authId" plain size="mini">粉丝
            {{ count.followerCount }}
          </el-button>
        </el-tooltip>
      </div>
      <div class="b">
        <!-- 可见 不设置隐私 -->
        <el-button :class="{current:(routeName === article)}" plain size="mini" @click="toArticle">
          文章 {{ aCount.articleCount }}
        </el-button>
        <!-- 可查看 -->
        <el-button v-if="privacy.comment || privacy.userId === authId" :class="{current:(routeName === comment)}" plain
                   size="mini" @click="toComment">
          留言 {{ aCount.commentCount }}
        </el-button>
        <!-- 不可查看 -->
        <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，留言列表不可见" placement="top">
          <el-button v-if="!privacy.comment && privacy.userId !== authId" :class="{current:(routeName === comment)}"
                     plain
                     size="mini">
            留言 {{ aCount.commentCount }}
          </el-button>
        </el-tooltip>
        <!-- 可查看 -->
        <el-button v-if="privacy.patron || privacy.userId === authId" :class="{current:(routeName === patron)}" plain
                   size="mini" @click="toPatron">
          赞助 {{ patronCount }}
        </el-button>
        <!-- 不可查看 -->
        <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，赞助列表不可见" placement="top">
          <el-button v-if="!privacy.patron && privacy.userId !== authId" :class="{current:(routeName === patron)}" plain
                     size="mini">赞助 {{ patronCount }}
          </el-button>
        </el-tooltip>
      </div>
      <div class="c">
        <div class="c-div">
          <!-- 可查看 -->
          <el-button v-if="privacy.thumb || privacy.userId === authId" :class="{current:(routeName === thumb)}" plain
                     size="mini" @click="toThumb">
            获赞 {{ aCount.thumbCount }}
          </el-button>
          <!-- 不可查看 -->
          <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，获赞列表不可见" placement="top">
            <el-button v-if="!privacy.thumb && privacy.userId !== authId" :class="{current:(routeName === thumb)}" plain
                       size="mini">
              获赞 {{ aCount.thumbCount }}
            </el-button>
          </el-tooltip>
          <!-- 可查看 -->
          <el-button v-if="privacy.award || privacy.userId === authId" :class="{current:(routeName === award)}" plain
                     size="mini" @click="toAward">
            获奖励 {{ aCount.awardCount }}
          </el-button>
          <!-- 不可查看 -->
          <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，获奖励列表不可见" placement="top">
            <el-button v-if="!privacy.award && privacy.userId !== authId" :class="{current:(routeName === award)}" plain
                       size="mini">
              获奖励 {{ aCount.awardCount }}
            </el-button>
          </el-tooltip>
          <!-- 可查看 -->
          <el-button v-if="privacy.doThumb || privacy.userId === authId" :class="{current:(routeName === thumbDo)}"
                     plain size="mini" @click="toDoThumb">
            点赞 {{ aCount.doThumbCount }}
          </el-button>
          <!-- 不可查看 -->
          <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，点赞列表不可见" placement="top">
            <el-button v-if="!privacy.doThumb && privacy.userId !== authId" :class="{current:(routeName === thumbDo)}"
                       plain size="mini">点赞 {{ aCount.doThumbCount }}
            </el-button>
          </el-tooltip>
          <!-- 可查看 -->
          <el-button v-if="privacy.doAward || privacy.userId === authId" :class="{current:(routeName === awardDo)}"
                     plain size="mini" @click="toDoAward">
            奖励 {{ aCount.doAwardCount }}
          </el-button>
          <!-- 不可查看 -->
          <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，奖励列表不可见" placement="top">
            <el-button v-if="!privacy.doAward && privacy.userId !== authId" :class="{current:(routeName === awardDo)}"
                       plain size="mini">奖励 {{ aCount.doAwardCount }}
            </el-button>
          </el-tooltip>
          <!-- 可查看 -->
          <el-button v-if="privacy.doCollect || privacy.userId === authId" :class="{current:(routeName === collectDo)}"
                     plain size="mini" @click="toDoCollect">
            收藏 {{ aCount.doArticleCollectCount }}
          </el-button>
          <!-- 不可查看 -->
          <el-tooltip class="item" effect="dark" content="由于该用户隐私设置，收藏列表不可见" placement="top">
            <el-button v-if="!privacy.doCollect && privacy.userId !== authId"
                       :class="{current:(routeName === collectDo)}"
                       plain size="mini">收藏 {{ aCount.doArticleCollectCount }}
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "total",
  props: ["username", "userId", "avatar", "count", "aCount", "patronCount", "privacy", "authId"],
  data() {
    return {
      routeName: this.$route.name,
      article: 'user-article-id',
      award: 'user-award-id',
      comment: 'user-comment-id',
      followee: 'user-followee-id',
      follower: 'user-follower-id',
      thumb: 'user-thumb-id',
      patron: 'user-patron-id',
      awardDo: 'user-award-do-id',
      collectDo: 'user-collect-do-id',
      thumbDo: 'user-thumb-do-id',
    }
  },
  methods: {
    // 跳转到关注页面
    async toFollowee() {
      // window.location = '/user/followee/' + this.userId
      await this.$router.push('/user/followee/' + this.userId)
    },
    // 跳转到粉丝页面
    async toFollower() {
      // window.location = '/user/follower/' + this.userId
      await this.$router.push('/user/follower/' + this.userId)
    },
    // 跳转到我的文章面
    async toArticle() {
      // window.location = '/user/article/' + this.userId
      await this.$router.push('/user/article/' + this.userId)
    },
    // 跳转到留言回复页面
    async toComment() {
      // window.location = '/user/comment/' + this.userId
      await this.$router.push('/user/comment/' + this.userId)
    },
    // 跳转到赞助页面
    async toPatron() {
      // window.location = '/user/patron/' + this.userId
      await this.$router.push('/user/patron/' + this.userId)
    },
    // 跳转到获赞页面
    async toThumb() {
      // window.location = '/user/thumb/' + this.userId
      await this.$router.push('/user/thumb/' + this.userId)
    },
    // 跳转到获奖励页面
    async toAward() {
      // window.location = '/user/award/' + this.userId
      await this.$router.push('/user/award/' + this.userId)
    },
    // 跳转到点赞页面
    async toDoThumb() {
      // window.location = '/user/thumb/do/' + this.userId
      await this.$router.push('/user/thumb/do/' + this.userId)
    },
    // 跳转到奖励页面
    async toDoAward() {
      // window.location = '/user/award/do/' + this.userId
      await this.$router.push('/user/award/do/' + this.userId)
    },
    // 跳转到收藏页面
    async toDoCollect() {
      // window.location = '/user/collect/do/' + this.userId
      await this.$router.push('/user/collect/do/' + this.userId)
    }
  }
}
</script>
<style lang="less" scoped>

// 外层大容器
.user-container {

  a:hover {
    color: #8205c6;
    text-decoration: underline;
  }

  .main {

    // 顶部大头像区
    .avatar-box {

      .fs25 {
        font-size: 25px;
      }

      div {
        margin-left: 30px;
      }

      // VIP赞助人头像
      img {
        width: 100px;
        height: 100px;
        padding: 2px;
        border-radius: 50%;
        box-shadow: 0 0 20px 6px white;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        object-fit: cover;
      }

      img:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }

      b {
        color: #d9d7d7;
      }

      p {
        margin-top: 10px;
        font-size: 14px;
        color: #d9d7d7;
      }
    }

    // 各项统计
    .total {
      padding: 20px 0 30px;
      font-size: 14px;
      background-color: #FFFFFF;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

      .el-divider {
        background-color: #acaeb3;
      }

      .a, .b {
        display: flex;
        justify-content: center;
        margin: 10px 0 15px;
        align-items: center;
      }

      .c-div {
        margin: 6px auto 0;
        white-space: nowrap;
      }
    }
  }
}

// 激活样式
.current {
  color: white;
  background-color: black;
}

.el-button:hover {
  color: white;
  background-color: black;
}

.user-container {

  .container-in {

    .main {

      .avatar-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 20px 40px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        background-color: black;
        box-shadow: 0 0 20px 6px white;
      }

      .total {
        .c {
          display: flex;
          align-items: center;
          overflow: auto;
        }
      }
    }

    .aside {
      float: left;
      width: 23%;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      border-radius: 4px;
    }
  }
}

// sm
@media screen and (max-width: 960px) {
  .user-container {

    .container-in {


      .main {

        .avatar-box {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px 20px;
          border-top-right-radius: 4px;
          border-top-left-radius: 4px;
          background-color: black;
        }

        .total {
          .c {
            display: flex;
            align-items: center;
            margin: 6px 20px;
            padding-bottom: 30px;
            overflow: auto;
          }
        }
      }

      .aside {
        width: 100%;
      }
    }
  }

}
</style>
